import React, { PropsWithChildren, useEffect, useRef} from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router-dom';
import Header from '@/components/Header';
import actions from '@/store/actions/home';
import { CombinedState } from '@/store/reducers';
import HomeSliders from "./components/HomeSliders";
import { HomeState } from '@/store/reducers/home';
import LessonList from '../../components/LessonList';
import { loadMore, downRefresh, store, debounce, throttle } from "@/utils";
import './index.less';
type StateProps = ReturnType<typeof mapStateToProps>
type DispatchProps = typeof actions;
interface params { }
type Props = PropsWithChildren<RouteComponentProps<Params> & StateProps & DispatchProps>


interface Params { }
function Home(props: Props) {
    const homeContainerRef = useRef(null);
    const lessonListRef = useRef(null);
    useEffect(() => {
      loadMore(homeContainerRef.current, props.getLessons);
      downRefresh(homeContainerRef.current, props.refreshLessons);
      homeContainerRef.current.addEventListener("scroll", () =>
        lessonListRef.current()
      );
      if (props.lessons) {
        homeContainerRef.current.scrollTop = store.get("homeScrollTop");
      }
      return () => {
        store.set("homeScrollTop", homeContainerRef.current.scrollTop);
      };
    });
    return <div>
        <Header
            currentCategory={props.currentCategory}
            setCurrentCategory={props.setCurrentCategory}
        >
            <div className="home-container" ref={homeContainerRef}>
                <HomeSliders sliders={props.sliders} getSliders={props.getSliders} />
                <LessonList
                    ref={lessonListRef}
                    container={homeContainerRef}
                    lessons={props.lessons}
                    getLessons={props.getLessons}
                />
            </div>
        </Header>
        Home
    </div>
}

let mapStateToProps = (state: CombinedState): HomeState => state.home
export default connect(
    mapStateToProps,
    actions
)(Home);